Skip to content

fix: 배너 컴포넌트 초기 렌더링 시 레이아웃 흔들림(화면 안정성 개선) #87

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
leeleeleeleejun merged 1 commit into from
Dec 23, 2025
Merged

fix: 배너 컴포넌트 초기 렌더링 시 레이아웃 흔들림(화면 안정성 개선) #87

leeleeleeleejun merged 1 commit into from
Dec 23, 2025

Conversation

@leeleeleeleejun
Copy link
Member

@leeleeleeleejun leeleeleeleejun commented Dec 23, 2025 •
edited by coderabbitai bot
Loading

#️⃣연관된 이슈

📝작업 내용

1. 배너 초기 렌더링 시 레이아웃 흔들림(CLS) 해결

문제 상황:
keen-slider 라이브러리는 자바스크립트가 실행되고 초기화(init)된 후에야 슬라이드 위치를 계산합니다. 이로 인해 JS 로딩 전(Hydration 이전)에는 contents들이 세로로 나열되었다가 제대로 확장 되며 레이아웃이 덜컥거리는 현상이 발생했습니다.
해결 방법:
JS가 로드되기 전에는 style를 활용하여 첫 번째 슬라이드만 노출하고, 나머지 슬라이드는 숨김(hidden) 처리하여 레이아웃을 고정했습니다.

스크린샷 (선택)

적용 전
image

적용 후

image

💬리뷰 요구사항(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

Summary by CodeRabbit

버그 수정

  • 배너 슬라이더가 단일 항목일 때 루핑되지 않도록 수정
  • 컴포넌트 로드 완료 전까지 첫 번째 슬라이드만 표시되도록 개선

✏️ Tip: You can customize this high-level summary in your review settings.

@leeleeleeleejun leeleeleeleejun self-assigned this Dec 23, 2025
@leeleeleeleejun leeleeleeleejun linked an issue Dec 23, 2025 that may be closed by this pull request
[BUG] 배너 컴포넌트 초기 렌더링 시 레이아웃 흔들림 (화면 안정성 저하) #86
Closed
@coderabbitai
Copy link

coderabbitai bot commented Dec 23, 2025 •
edited
Loading

Walkthrough

배너 컴포넌트의 슬라이더 기능을 안정화했습니다. 콘텐츠가 여러 개일 때만 루핑이 작동하도록 조건을 추가하고, 로딩 완료 전까지 첫 번째 슬라이드를 제외한 모든 슬라이드를 숨기는 기능을 구현했습니다.

Changes

Cohort / File(s) 변경 요약
배너 슬라이더 동작 개선
packages/ui/src/components/Banner/Banner.tsx		 슬라이더 루핑 조건을 loop: true에서 loop: contents.length > 1로 변경하여 콘텐츠가 여러 개일 때만 루핑 활성화. 로딩 완료 전까지 첫 번째 슬라이드를 제외한 다른 슬라이드에 'hidden' 클래스를 조건부로 추가하여 초기 렌더링 시 시각적 깜빡임 방지

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

Poem

🐰 한 장의 슬라이드만 보여주고,
여럿 있을 때만 빙글 도네,
깜빡임 없이 부드럽게 시작해,
배너 놀이터가 더욱 멋져졌네! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed PR 제목은 배너 컴포넌트의 초기 렌더링 시 레이아웃 흔들림 문제 해결을 명확하게 설명하며, 변경사항의 핵심 의도와 일치합니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/#86
📜 Recent review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9bfa3fd and abdad1c.

📒 Files selected for processing (1)
  • packages/ui/src/components/Banner/Banner.tsx
🧰 Additional context used
🧬 Code graph analysis (1)
packages/ui/src/components/Banner/Banner.tsx (1)
packages/ui/src/utils/cn.ts (1)
  • cn (19-21)
🔇 Additional comments (2)
packages/ui/src/components/Banner/Banner.tsx (2)

46-46: 단일 콘텐츠일 때 루핑 방지 로직이 적절합니다.

콘텐츠가 하나만 있을 때 루핑을 비활성화하는 것은 올바른 개선입니다.

104-110: CLS 개선을 위한 조건부 숨김 처리가 적절합니다.

초기 로딩 시 첫 번째 슬라이드만 표시하고 나머지를 숨기는 방식으로 레이아웃 흔들림을 효과적으로 방지합니다.

단, keen-slider 라이브러리가 초기에 숨겨진(display: none) 슬라이드를 올바르게 처리하는지 확인이 필요합니다. 일부 슬라이더 라이브러리는 초기화 시 슬라이드의 너비/높이를 계산하므로, 숨겨진 요소의 경우 계산이 잘못될 수 있습니다.

다음 사항을 확인해 주세요:

  1. 실제 브라우저에서 슬라이더가 정상적으로 초기화되고 모든 슬라이드로 이동 가능한지 테스트
  2. 개발자 도구에서 created() 콜백 실행 후 모든 슬라이드의 너비/높이가 올바르게 계산되는지 확인

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@leeleeleeleejun leeleeleeleejun merged commit f7eda48 into develop Dec 23, 2025
1 check passed
@leeleeleeleejun leeleeleeleejun changed the title fix: 배너 컴포넌트 초기 렌더링 시 레이아웃 흔들림(화면 안정성 저 fix: 배너 컴포넌트 초기 렌더링 시 레이아웃 흔들림(화면 안정성 개선) Dec 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@leeleeleeleejun leeleeleeleejun

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[BUG] 배너 컴포넌트 초기 렌더링 시 레이아웃 흔들림 (화면 안정성 저하)

2 participants

@leeleeleeleejun